<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #bigbox{
            height: 70px;
            width: 800px;
            display: flex;
            position: fixed;
            top: 100px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
        }
        #one{
            background: dodgerblue;
            color: white;
            width: 200px;
            font-size: 40px;
            line-height: 70px;
        }
        #search{
            flex: 1;
            position: relative;
        }
        #search input {
            width: 100%;
            height: 70px;
            font-size: 40px;
            line-height: 70px;
        }
        #search aside{
            width: 100%;
            height: 420px;
            position: absolute;
            border: 1px solid #111;
            display: none;
            border-top: none;
            flex-direction: column;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="bigbox">
        <div id="search">
            <input type="text" >
            <aside id="list"></aside>
        </div>
        <button id="one">前锋一下</button>
    </div>
    <script>
        let btn = document.getElementById("one")
        let sea = document.querySelector("#search input")
        let list = document.getElementById("list")
        // sear.onclick = function(){
        //     list.style.display = "block"
        // }
        document.onclick = function (e){
            list.style.display = "none"
            if(e.target === sea || e.target === btn){
                list.style.display = "block"
                sea.style.borderBottom = "none"
                sea.value = ""
            }
            sea.style.border = "1px solid #111"
            
        }
        btn.onclick = function(){
            if(sea.value !== ""){
                let li = document.createElement("input")
                li.value = sea.value 
                for(let i = 0; i < list.children.length; i++){
                    if(list.children[i].value === li.value){
                        list.children[i].remove()
                    }
                }
                list.insertBefore(li,list.children[0])
            }
        }
        list.onclick = function(e){
            sea.value = e.target.value
        }
    </script>
</body>
</html>